<template>
	<uni-popup ref="popup" :mask-click="false">
		<view class="content">
			<view style="padding: 20rpx;padding-bottom: 60rpx;">
				<button type="primary" @click="getImg">流程图</button>
				<text style="float: right;" @click="close">关闭</text>
			</view>
			<view class="content-record">
				<timeline>
					<timelineItem v-for="(item,index) in  list" :key="index" :assignee='item.nickName'>
						<view class="tripItem">
							<view class="status">
								<uni-tag :inverted="true" :text="item.status"
									:type="item.status ==='待处理'?'warning':'primary'" />
								<uni-tag :inverted="true" @click="fileListOpen(item.fileList)" text="附件"
									v-if="item.fileList && item.fileList.length > 0" :type="'primary'" />
							</view>
							<view class="title">{{item.name}}<text style="float: right;">{{item.startTime}}</text>
							</view>
							<view class="tips">{{item.comment}}
							</view>
						</view>
					</timelineItem>
				</timeline>
			</view>
		</view>
		<uni-popup ref="fileListRef" :mask-click="false">
			<view class="file-content">
				<view style="text-align: end;padding: 20rpx;"><text @click="fileListClose">关闭</text></view>
				<uni-list :border="true" v-for="item in fileList">
					<uni-list-item link :title="item.name" @click="filePreview(item)"></uni-list-item>
				</uni-list>
			</view>
		</uni-popup>
	</uni-popup>
</template>

<script>
	import processInstApi from "@/api/workflow/processInst.js";
	import timeline from '@/components/chenbin-timeline/timeLine.vue'
	import timelineItem from '@/components/chenbin-timeline/timelineItem.vue'

	export default {
		props: {},
		components: {
			timeline,
			timelineItem
		},
		data() {
			return {
				list: [],
				url: '',
				processInstId: '',
				fileList: []
			}
		},
		methods: {
			//打开
			open(processInstId) {
				this.processInstId = processInstId
				this.$refs.popup.open('bottom')
				processInstApi.getHistoryInfoList(processInstId).then(response => {
					this.list = response.data
				})
			},
			//关闭
			close() {
				this.$refs.popup.close('bottom')
			},
			//流程图
			getImg() {
				this.url =
					`${this.VUE_APP_BASE_API}/workflow/processInstance/getHistoryProcessImage?processInstanceId=${this.processInstId}`
				uni.previewImage({
					urls: [this.url]
				})
			},
			//附件列表
			fileListOpen(fileList) {
				this.fileList = fileList
				this.$refs.fileListRef.open('bottom');
			},
			//关闭列表
			fileListClose() {
				this.$refs.fileListRef.close('bottom');
			},
			//附件预览
			filePreview(item) {
				let url = `${this.VUE_APP_BASE_API}/workflow/task/downloadAttachment/${item.id}`
				uni.navigateTo({
					url: `/pages/common/webview/index?src=${url}&title=${item.name}`
				})
			}
		},
	}
</script>

<style scoped>
	.content {
		height: 70vh;
		background-color: #fff;
	}

	.file-content {
		height: 55vh;
		background-color: #fff;
	}

	.content-record {
		background-color: #fff;
		overflow-y: auto;
		height: 62vh;
	}

	.tripItem {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
		border-radius: 10px;
		margin-bottom: 30rpx;
	}

	.status {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.tips {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #6F6F6F;
		margin-top: 20rpx;
	}

	.title {
		font-size: 22rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
	}

	.date {
		font-size: 22rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #6F6F6F;
	}

	uni-button {
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		float: left;
	}
</style>
